<template>
  <view>
    <!-- 分类选择器 -->
    <view class="category-bar">
      <view 
        v-for="item in types" 
        :key="item.id" 
        :class="['category-item', type === item.id ? 'active' : '']" 
        @click="switchCategory(item.id)">
        {{ item.name }}
      </view>
    </view>

    <!-- 壁纸列表 -->
    <scroll-view class="wallpaper-list" scroll-y="true" @scrolltolower="onReachBottom">
      <view v-for="(wallPaper, index) in wallPapers" :key="index" class="wallpaper-item" @click="toDetail(wallPaper.src)">
        <image :src="wallPaper.src" class="wallpaper-thumb" mode="aspectFill" lazy-load></image>
      </view>
    </scroll-view>

    <!-- 加载中提示 -->
    <view v-if="loading" class="loading">加载中...</view>
    <view v-else-if="!hasMoreData" class="no-more-data">没有更多数据了</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      wallPapers: [],
      type: 1, // 默认选中第一个分类
      page: 1,
      loading: false, // 控制是否正在加载数据
      hasMoreData: true, // 是否还有更多数据
      types: [
        { id: 1, name: '风景' },
        { id: 2, name: '动漫' },
        { id: 3, name: '美女' },
        { id: 4, name: '游戏' },
        { id: 5, name: '明星' },
        { id: 6, name: '动物' },
        { id: 7, name: '科幻' }
      ]
    };
  },

  onLoad(options) {
    if (options.type) {
      this.type = parseInt(options.type);
    }
    this.fetchWallPapers();
  },

  methods: {
    switchCategory(selectedType) {
      this.type = selectedType;
      this.page = 1;
      this.wallPapers = [];
      this.loading = false;
      this.hasMoreData = true;
      this.fetchWallPapers();
    },

    fetchWallPapers() {
      if (this.loading || !this.hasMoreData) return;

      const { type, page } = this;
      this.loading = true;

      uni.request({
        url: `https://api.yuqios.com/yqbizhi.php?type=${type}&page=${page}`,
        method: 'GET',
        success: res => {
          if (res.data.code === 0) {
            const newData = res.data.data;
            if (newData.length > 0) {
              this.wallPapers = [...this.wallPapers, ...newData];
              this.page += 1;
              this.loading = false;
            } else {
              this.hasMoreData = false;
              this.loading = false;
              uni.showToast({
                title: '没有更多数据了',
                icon: 'none'
              });
            }
          } else {
            this.loading = false;
            uni.showToast({
              title: '加载失败，请重试',
              icon: 'none'
            });
          }
        },
        fail: err => {
          this.loading = false;
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          });
        }
      });
    },

    onReachBottom() {
      if (this.loading || !this.hasMoreData) return;
  
      setTimeout(() => {
        this.fetchWallPapers();
      }, 500); // 增加500毫秒的延迟
    },

    toDetail(src) {
      uni.navigateTo({
        url: `/pages/detail/detail?src=${encodeURIComponent(src)}`
      });
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.view {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

/* 分类选择栏样式 */
.category-bar {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 20rpx;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; /* Internet Explorer 10+ */
  scrollbar-width: none; /* Firefox 64+ */
}

.category-bar::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

.category-item {
  padding: 10rpx 20rpx;
  margin-right: 10rpx;
  border-radius: 5rpx;
  background-color: #f0f0f0;
  width: 300rpx;
  color: #333;
  cursor: pointer;
  font-size: 14px;
}

.category-item.active {
  background-color: #007AFF;
  color: white;
}

/* 壁纸列表样式 */
.wallpaper-list {
  height: calc(100vh - 100rpx); /* 确保列表高度占满剩余空间 */
  overflow: hidden;
}

.wallpaper-item {
  margin-bottom: 10rpx;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.wallpaper-thumb {
  width: 100%;
  height: 300rpx; /* 设置固定高度以保持比例 */
  object-fit: cover; /* 保持图片比例并填充容器 */
}

/* 加载中提示样式 */
.loading {
  text-align: center;
  padding: 20rpx;
  color: #999;
}

/* 没有更多数据提示样式 */
.no-more-data {
  text-align: center;
  padding: 20rpx;
  color: #999;
}
</style>